<template>
  <!-- index.wxml -->
  <view class="container">
    <view class="search">
      <view class="flex-box flex-box-v-center searchCon"
            @tap="boxClick">
        <view class="icon">
          <image src="/static/static/image/search.png"></image>
        </view>
        <view class="text flex-item-1 font_s_28 font_c_8e">春装</view>
      </view>
    </view>
    <view class="flex-box classifyCon">
      <scroll-view class="classify bg_f7"
                   scroll-y
                   scroll-with-animation="true">
        <view @tap="classifyChange(item)"
              v-for="(item, index) in classifyData"
              :key="index"
              :class="'classifyItem font_s_28 ' + ((item.id == classifyActive )? 'active' : '')">{{item.name}}</view>
      </scroll-view>
      <scroll-view class="rightScroll"
                   scroll-y
                   scroll-with-animation="true">
        <block v-for="(item, index) in 3"
               :key="index">
          <view>
            <view class="detailsTitle font_c_main font_s_30">
              <view class="flex-box">
                <view class="flex-item-1">
                  <span class="action">分类1</span>
                </view>
                <view class="more font_s_24 font_c_91 flex-item-1"
                      @tap="linkGoodsList">
                  <text>查看全部</text>
                </view>
              </view>
            </view>
            <view class="detailsContent font_s_24 font_c_45">
              <view class="detailsItem"
                    v-for="(item, index) in 5"
                    :key="index">
                <view class="detailsItemImg">
                  <image src="./../../static/image/296866_00.jpg"></image>
                </view>
                <text class="font_c_91">商品</text>
              </view>
            </view>
          </view>
        </block>
      </scroll-view>
    </view>
  </view>
</template>

<script>
//index.js
//获取应用实例
const app = getApp().globalData

export default {
  data() {
    return {
      classifyActive: 1,
      classifyData: [
        {
          id: 1,
          name: '分类1'
        },
        {
          id: 2,
          name: '分类2'
        },
        {
          id: 3,
          name: '分类3'
        }
      ]
    }
  },

  components: {},
  props: {},
  onLoad: function() {},
  methods: {
    classifyChange: function(item) {
      this.classifyActive = item.id
    },

    boxClick() {
      uni.navigateTo({
        url: '/pages/search/search'
      })
      return
    },

    //跳转到商品列表
    linkGoodsList() {
      uni.navigateTo({
        url: '/pages/goodsList/goodsList'
      })
      return
    }
  }
}
</script>
<style>
@import './classification.css';
</style>